<template>
  <el-container class="layout-container">
    <!-- 头部区域 -->
    <el-header height="60px" class="header">
      <div class="header-left">
        <h1 class="system-title">点餐系统</h1>
      </div>
      <div class="header-right">
        <el-avatar :size="40" :src="userAvatar"></el-avatar>
        <span class="username">{{ username }}</span>
        <el-link type="primary" @click="handleLogout">退出登录</el-link>
      </div>
    </el-header>
    
    <el-container>
      <!-- 侧边栏区域 -->
      <el-aside width="200px" class="aside">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="/dashboard">
            <i class="el-icon-s-home"></i>
            <span slot="title">工作台</span>
          </el-menu-item>
          <el-menu-item index="/order">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <el-menu-item index="/category">
            <i class="el-icon-menu"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
          <el-menu-item index="/dish">
            <i class="el-icon-dish"></i>
            <span slot="title">菜品管理</span>
          </el-menu-item>
          <el-menu-item index="/setmeal">
            <i class="el-icon-goods"></i>
            <span slot="title">套餐管理</span>
          </el-menu-item>
          <el-menu-item index="/statistics">
            <i class="el-icon-s-data"></i>
            <span slot="title">数据统计</span>
          </el-menu-item>
          <el-menu-item index="/employee">
            <i class="el-icon-user"></i>
            <span slot="title">员工管理</span>
          </el-menu-item>
          <el-menu-item index="/shop">
            <i class="el-icon-s-shop"></i>
            <span slot="title">店铺管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <!-- 主要内容区域 -->
      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { employeeLogout } from '@/api/employee'

export default {
  name: 'Layout',
  data() {
    return {
      // 默认头像
      userAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      // 用户名
      username: '管理员',
      // 当前激活的菜单
      activeMenu: '/dashboard'
    }
  },
  methods: {
    // 退出登录处理
    handleLogout() {
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用退出登录API
        employeeLogout()
          .then(res => {
            if (res.code === 1) {
              // 清除本地存储的token和用户信息
              localStorage.removeItem('token')
              localStorage.removeItem('userInfo')
              
              this.$message.success('退出登录成功')
              // 跳转到登录页
              this.$router.push('/login')
            } else {
              this.$message.error(res.msg || '退出登录失败')
            }
          })
          .catch(err => {
            console.error('退出登录失败', err)
            this.$message.error('退出登录失败')
          })
      }).catch(() => {
        this.$message.info('已取消退出')
      })
    }
  },
  created() {
    // 根据当前路由设置激活菜单
    this.activeMenu = this.$route.path
    
    // 从本地存储获取用户信息
    const userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      const user = JSON.parse(userInfo)
      this.username = user.name || '管理员'
    }
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
  width: 100%;
}

.header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dcdfe6;
  padding: 0 20px;
}

.system-title {
  font-family: '楷体', KaiTi, sans-serif;
  font-size: 30px;
  margin: 0;
  text-align: left;
}

.header-right {
  display: flex;
  align-items: center;
}

.username {
  margin: 0 10px;
  font-size: 14px;
}

.aside {
  background-color: #545c64;
  height: calc(100vh - 60px);
}

.el-menu-vertical {
  border-right: none;
}

.main {
  background-color: #f0f2f5;
  padding: 20px;
}
</style>